import { useDownloadFileList } from "@/service/dowload";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Container from "@mui/material/Container";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Image from "next/image";
import * as React from "react";
import v3 from "../../../../public/all.svg";
import v1 from "../../../../public/bacteria.svg";
import v2 from "../../../../public/phage.svg";
import DownloadRight from "./DownloadRight";
const items = [
  {
    id: 1,
    icon: <Image src={v1} width={32} height={32} alt="Picture of the author" />,
    title: "Download Bacteria",
    description: "You Can Filter And Download Bacteria From Here",
    filter_type: "bacteria",
  },
  {
    id: 2,
    icon: <Image src={v2} width={32} height={32} alt="Picture of the author" />,
    title: "Download Phage",
    description: "You Can Filter And Download Phage From Here",
    filter_type: "phage",
  },
  {
    id: 3,
    icon: <Image src={v2} width={32} height={32} alt="Picture of the author" />,
    title: "Download ProPhage",
    description: "You Can Filter And Download ProPhage From Here",
    filter_type: "prophage",
  },
  {
    id: 4,
    icon: <Image src={v3} width={32} height={32} alt="Picture of the author" />,
    title: "Download All",
    description: "You Can Download All From Here",
    filter_type: "all",
  },
];

export default function Features() {
  const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
  const [selectedFilterType, setSelectedFilterType] =
    React.useState("bacteria");
  const [page, setPage] = React.useState(1);
  const [searchText, setSearchText] = React.useState("");

  const {
    data: dataSource,
    isLoading: downloadFileLoading,
    refetch: refreshDataSource,
  } = useDownloadFileList(selectedFilterType, searchText, page);

  React.useEffect(() => {
    refreshDataSource();
  }, [searchText, refreshDataSource, page]);

  const handleItemClick = (index: number, filter_type: string) => {
    setPage(1);
    setSearchText("");
    if (index != selectedItemIndex) {
      setSelectedItemIndex(index);
      setSelectedFilterType(filter_type);
      refreshDataSource();
    }
  };

  return (
    <Container id="features" sx={{ py: { xs: 2, sm: 4 } }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <Box flex={1} sx={{ marginRight: "2rem" }}>
          <Stack
            direction="column"
            justifyContent="center"
            alignItems="flex-start"
            spacing={2}
            useFlexGap
            sx={{ width: "100%" }}
          >
            {items.map(({ icon, title, description, filter_type }, index) => (
              <Card
                key={index}
                variant="outlined"
                component={Button}
                onClick={() => handleItemClick(index, filter_type)}
                sx={{
                  p: 3,
                  height: "fit-content",
                  width: "90%",
                  background: "none",
                  backgroundColor:
                    selectedItemIndex === index ? "action.selected" : undefined,
                  borderColor: (theme) => {
                    if (theme.palette.mode === "light") {
                      return selectedItemIndex === index
                        ? "primary.light"
                        : "grey.200";
                    }
                    return selectedItemIndex === index
                      ? "primary.dark"
                      : "grey.800";
                  },
                }}
              >
                <Box
                  sx={{
                    width: "100%",
                    display: "flex",
                    textAlign: "left",
                    flexDirection: { xs: "column", md: "row" },
                    alignItems: { md: "center" },
                    gap: 2.5,
                  }}
                >
                  <Box>
                    <Box
                      sx={{
                        color: (theme) => {
                          if (theme.palette.mode === "light") {
                            return selectedItemIndex === index
                              ? "primary.main"
                              : "grey.300";
                          }
                          return selectedItemIndex === index
                            ? "primary.main"
                            : "grey.700";
                        },
                      }}
                    >
                      {icon}
                    </Box>
                    <Box sx={{ textTransform: "none" }}>
                      <Typography
                        color="text.primary"
                        variant="body2"
                        fontWeight="bold"
                      >
                        {title}
                      </Typography>
                      <Typography
                        color="text.secondary"
                        variant="body2"
                        sx={{ my: 0.5 }}
                      >
                        {description}
                      </Typography>
                      {/* <Link
                        color="primary"
                        variant="body2"
                        fontWeight="bold"
                        sx={{
                          display: "inline-flex",
                          alignItems: "center",
                          "& > svg": { transition: "0.2s" },
                          "&:hover > svg": { transform: "translateX(2px)" },
                        }}
                        onClick={(event) => {
                          event.stopPropagation();
                        }}
                      >
                        <span>Learn more</span>
                        <ChevronRightRoundedIcon
                          fontSize="small"
                          sx={{ mt: "1px", ml: "2px" }}
                        />
                      </Link> */}
                    </Box>
                  </Box>
                </Box>
              </Card>
            ))}
          </Stack>
        </Box>
        <Box>
          <Card
            variant="outlined"
            sx={{
              height: "100%",
              width: "100%",
              ":hover": {
                border: "1px solid white",
              },
            }}
          >
            <Box
              sx={{
                m: "auto",
                width: 620,
                backgroundSize: "contain",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  justifyContent: "center",
                  marginTop: "2rem",
                }}
              >
                <DownloadRight
                  dataSource={dataSource?.results}
                  searchText={searchText}
                  setSearchText={setSearchText}
                  downloadFileLoading={downloadFileLoading}
                  total={dataSource?.count}
                  setPage={setPage}
                  filterType={selectedFilterType}
                  page={page}
                />
              </Box>
            </Box>
          </Card>
        </Box>
      </Box>
    </Container>
  );
}
